<template>
	<div>
		<header></header>
		<div class="department_container" :style="{height: heightClient}" v-if="a">
			<header>
				<ul>
					<li @click="nav_click('business')" :class='{isActive: businessShow}'>业务总览</li>
					<li @click="nav_click('money')" :class='{isActive: moneyShow}'>收支总览</li>
					<li @click="nav_click('achievement')" :class='{isActive: achievementShow}'>绩效总览</li>
				</ul>
			</header>
			<img src="../assets/blank.png">
		</div>
	</div>
</template>
<script>
export default {
	data () {
		return {
			heightClient: '0px',
			a: true,
			businessShow: false,
			moneyShow: true,
			achievementShow: false
		}
	},
	methods: {
		nav_click (type) {
			this.businessShow = false
			this.moneyShow = false
			this.achievementShow = false
			type === 'business' ? this.businessShow = true : type === 'money' ? this.moneyShow = true : this.achievementShow = true

			type === 'money' ? this.$router.push('/kong') : type === 'business' ? this.$router.push('/all') : this.$router.push('/kong')
		}
	},
 	created () {
		this.heightClient = document.body.clientHeight - 50 + 'px'
		this.a = false
		this.a = true
	}
}
</script>
<style lang="scss" scoped>
	header {
		width: 100%;
		background: #fff;
	}
	.department_container{
		width: 100%;
		// min-height: 800px;
		background: #eee;
		// padding-top: 150px;
		img{
			width: 394px;
			height: 394px;
			display: block;
			margin: 0 auto;
			margin-top: 100px;
		}
		header {
		width: 100%;
		background: #fff;
		height: 63px;
		ul{
			height: 63px;
			margin-left: 20%;
			li {
				float: left;
				line-height: 63px;
				width: 140px;
				text-align: center;
				font-size: 17px;
				color: #646464;
				cursor: pointer;
			}
		}
		.isActive{
			color: #2FA4DB !important;
		}
	}
	}
</style>